<script setup>
const router = useRouter()
const userStore = useUserStore()
const { runAsync: logout } = logoutApi()

// 计算属性：获取用户信息
const userInfo = computed(() => userStore.userInfo || {})

// 退出登录
const handleLogout = async () => {
  try {
    await showDialog({
      title: '提示',
      message: '确定要退出登录吗？',
      showCancelButton: true
    })

    // 调用退出登录API
    await logout()

    // 清除本地存储的用户信息
    userStore.logout()

    showToast('已退出登录')

    // 跳转到登录页
    router.replace('/login')
  } catch (error) {
    // 用户取消操作或API调用失败
    console.log('操作已取消或失败:', error)
  }
}

// 检查是否已登录，未登录则跳转到登录页
// if (!userStore.hasLogin) {
//   router.replace('/login');
// }
</script>

<template>
  <div class="bg-gray-100 bg-white">
    <van-cell-group inset class="mb-5">
      <van-cell title="用户名" :value="userInfo.username" />
      <van-cell title="昵称" :value="userInfo.nickname" />
      <van-cell title="修改密码" is-link @click="router.push('/change-password')" />
      <van-cell title="账号设置" is-link @click="router.push('/settings')" />
    </van-cell-group>

    <div class="mt-10 px-4">
      <BaseButton round block type="primary" @click="handleLogout">退出登录</BaseButton>
    </div>
  </div>
</template>
<route>
  {
    path: '/mine',
    name: 'mine',
    meta: {
      title: '个人中心',
      keepAlive: true,
      showNavBar: true,
    }
  }
</route>
